<template>
	<div style="background-color: white; border-radius: 5px;padding-left: 10px;">
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="房屋费欠费统计" name="first"></el-tab-pane>
			<el-tab-pane label="车位欠费统计" name="third"></el-tab-pane>
		</el-tabs>
	</div>
	<div v-if="activeName === 'first'" class="fi">
		<form>
			<div class="search-form">
				<el-form-item label="选择房屋" style="width: 300px;margin-right: 30px;margin-top: 10px;">
					<el-select placeholder="请选择"></el-select>
				</el-form-item>
				<el-form-item label="费用所属月起" style="width: 300px;margin-right: 30px;margin-top: 10px;">
					<el-date-picker v-model="value5" type="month" placeholder="选择月" />
				</el-form-item>
				<el-form-item label="费用所属月止" class="s-xz" style="width: 300px;margin-top: 10px;">
					<el-date-picker v-model="value6" type="month" placeholder="选择月" />
				</el-form-item>
				<div class="q-but">
					<el-button class="q-but1">重置</el-button>
					<el-button class="q-but2">查询</el-button>
				</div>
			</div>
		</form>
		<div class="q-fi">
			<div class="q-jb">
				<div>基本信息</div>
				<el-checkbox-group>
					<el-checkbox v-for="city in cities" :key="city" :label="city" :value="city"
						style="margin-right: 70px;">
						{{ city }}
					</el-checkbox>
				</el-checkbox-group>
				<div style="margin-top: 20px;">计费项目</div>
				<el-checkbox-group>
					<el-checkbox v-for="city in cities" :key="city" :label="city" :value="city"
						style="margin-right: 70px;">
						{{ city }}
					</el-checkbox>
				</el-checkbox-group>
			</div>
		</div>
		<el-table style="width: 100%">
			<el-table-column fixed="left" prop="date" label="基本信息" width="150">
				<el-table-column label="房屋" width="150"></el-table-column>
			</el-table-column>
			<el-table-column label="垃圾处理费">
				<el-table-column label="欠费金额" width="100"></el-table-column>
				<el-table-column label="欠费月数" width="100"></el-table-column>
				<el-table-column label="欠费范围" width="150"></el-table-column>
			</el-table-column>
				<el-table-column label="水费">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="电费">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="物业管理费">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="燃气管道安装费">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="装修押金">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="二次供水电费">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="地下车库">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="租金">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="公共照明">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="公摊费">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="物业费">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
			<el-table-column fixed="right" label="总计" width="120">
				<el-table-column label="总欠费金额" width="100"></el-table-column>
			</el-table-column>
		</el-table>
	</div>
	
	<div v-if="activeName === 'third'" class="ti">
		<form>
			<div class="search-form">
				<el-form-item label="选择车位" style="width: 300px;margin-right: 30px;margin-top: 10px;">
					<el-select placeholder="请选择"></el-select>
				</el-form-item>
				<el-form-item label="费用所属月起" style="width: 300px;margin-right: 30px;margin-top: 10px;">
					<el-date-picker v-model="value5" type="month" placeholder="选择月" />
				</el-form-item>
				<el-form-item label="费用所属月止" class="s-xz" style="width: 300px;margin-top: 10px;">
					<el-date-picker v-model="value6" type="month" placeholder="选择月" />
				</el-form-item>
				<div class="q-but">
					<el-button class="q-but1">重置</el-button>
					<el-button class="q-but2">查询</el-button>
				</div>
			</div>
		</form>
		<div class="q-fi">
			<div class="q-jb">
				<div>基本信息</div>
				<el-checkbox-group>
					<el-checkbox v-for="city in cities" :key="city" :label="city" :value="city"
						style="margin-right: 70px;">
						{{ city }}
					</el-checkbox>
				</el-checkbox-group>
				<div style="margin-top: 20px;">计费项目</div>
				<el-checkbox-group>
					<el-checkbox v-for="city in cities" :key="city" :label="city" :value="city"
						style="margin-right: 70px;">
						{{ city }}
					</el-checkbox>
				</el-checkbox-group>
			</div>
		</div>
		<el-table style="width: 100%">
			<el-table-column fixed="left" prop="date" label="基本信息" width="150">
				<el-table-column label="车位" width="150"></el-table-column>
			</el-table-column>
			<el-table-column label="地下车库">
				<el-table-column label="欠费金额" width="100"></el-table-column>
				<el-table-column label="欠费月数" width="100"></el-table-column>
				<el-table-column label="欠费范围" width="150"></el-table-column>
			</el-table-column>
				<el-table-column label="车位服务费">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="车位租赁费">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="月保车位">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
				<el-table-column label="单次停车收费">
					<el-table-column label="欠费金额" width="100"></el-table-column>
					<el-table-column label="欠费月数" width="100"></el-table-column>
					<el-table-column label="欠费范围" width="150"></el-table-column>
				</el-table-column>
			<el-table-column fixed="right" label="总计" width="120">
				<el-table-column label="总欠费金额" width="100"></el-table-column>
			</el-table-column>
		</el-table>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import type { TabsPaneContext, ElMessageBox } from 'element-plus'
	const activeName = ref('first')
	const value5 = ref('')
	const value6 = ref('')
	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}
	const cities = ['房屋', '面积', '业主', '联系电话']
</script>

<style scoped>
	.search-form {
		display: flex;
		line-height: 50%;
		background-color: white;
		margin-top: 20px;
		padding: 15px;
		border-radius: 10px;
	}

	.search-form label {
		margin-right: 5px;
	}
	.q-but{
		line-height: 36px;
		margin-top: 10px;
		margin-left: 30px;
	}
	.q-but1 {
		min-width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0 20px;
		color: #7e8087;
		background-color: #fafafa;
		border: none;
		border-radius: 5px;
	}
	.q-but2{
		margin-left: 10px;
		min-width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0 20px;
		border-radius: 5px;
		color:#fff;
		background-color: #00c36d;
		
	}
	.q-fi{
		margin-top: 20px;
		background-color: white;
		display: flex;
		padding: 20px;
		border-radius: 10px;
		text-align: left;
	}
</style>